<template>
  <!--  :style="{width:fileTool.maxWidth+'px'}"   -->
    <div class="system-files-label" @dblclick="openEditor" style="width: 100%">
        <div>
            <el-icon>
                <component :is="icon"/>
            </el-icon>
        </div>
        <div :id="file?.fileId" :style="{marginLeft: '2px'}">
            {{ file.fileName }}
        </div>
    </div>
</template>

<script setup lang="ts">
import EditorWindowComponent from "../../management-system/components/window/editor/default/EditorWindowComponent.vue";
import {onMounted, ref} from "vue";
import {useLeftToolStore} from "../../store/leftTool";
import {useRouter} from "vue-router";
import {useRouterStore} from "../../store/router";
import {useWindowsStore} from "../../store/windows";

import {useFileStore} from "../../store/filesTool";
import {type} from "../../model/type";
import {AllIcons} from "../../icons";

const tool = useLeftToolStore()
const router = useRouter()
const cache = useRouterStore()
const windowLabel = useWindowsStore()

const props = defineProps({
    file: type.File
})


const icon = ref('')
const path = ref('')
const root = ref('')


onMounted(() => {
    if (props.file!.fileType === undefined) {
        icon.value = 'SystemFolderIcon'
        return
    }
    let type = props.file!.fileType
    icon.value = AllIcons.FileIconMapping.get(type)!

    if (type !== 1) {
        // 注册路由
        root.value = tool.ctx.basePath
        let base = tool.ctx.path
        let pathTemp = props.file!.filePath
        path.value = base + pathTemp
        let obj = {path: path.value, component: EditorWindowComponent}
        router.addRoute(root.value, obj)
        cache.AddRouteCache(
            {
                root: 'index',
                obj: obj
            }
        )
    }
})

function openEditor() {
    if (props.file!.fileType !== 1) {
        router.push(path.value)
        let win = new type.WindowLabel(path.value, props.file!.fileName, props.file!.fileType, true)
        windowLabel.UpdateWindow(win)
    }
}
</script>

<style scoped>
.system-files-label {
    display: flex;
    flex-direction: row;
    user-select: none;
}
</style>